<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataRyfh } from "@/api/search";
import { addOrUpdateRyfh } from "@/api/addOrUpdate";

const city = window.globalObj.name;
const editorRef = shallowRef();

const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const mode = ref("default");

// 加载html
const initHtml = () => {
  searchDataRyfh({ m: "行动要点-复杂情况设想和应对处置要" }).then((res) => {
    const { data } = res;
    valueHtml.value =
      data.find((x) => x.k === "复杂情况设想和应对处置要")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = ref(
  "情况设想1：当城市局部地区断电，造成部分电声防空警报器不能使用时。<br/>处置要点：立即启动移动式警报车，发放手摇式警报器，快速补位，并指定人员负责依令发放警报。<br/>情况设想2：部分人防工程遭袭，出现人员伤亡，造成民众恐㤺和局部出现混乱时。<br/>处置要点：快速组织协调医疗救护队展开救治，并视情组织人员就近调整到比较安全的人防工程中掩蔽，同时，组织心理防护队展开心理疏导。<br/>情况设想3：部分人员进入人员防护工程混乱，造成严重拥堵或拥挤时。<br/>处置要点：建立分级响应机制，快速了解就近人防工程使用情况，适情就近调整，快速引导人员分流进入适当的人防工程。<br/>情况设想4：当重要目标遭受打击时，造成附近居民伤亡人数较大时，本级救援、医疗救护力量严重不足时，导致救治难度明显增大。<br/>处置要点：快速组织跨区支援任务，调动附近地区消防应急等力量开展人员搜救工作，组建医疗救援队伍设置医疗救护点开展救治工作，重伤人员简单救治后转移到附近战时防空袭中心医院治疗。"
);

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateRyfh({
      m: "行动要点-复杂情况设想和应对处置要",
      data: [
        {
          k: "复杂情况设想和应对处置要",
          v: valueHtml.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (!editor) return;
  editor.destroy();
});
</script>
<template>
  <div class="">
    <FirstTitle name="复杂情况设想和应对处置要" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>